<template>
    <div class="audioPlayer">
        <div class="webaudiocomp" v-show="show">
            <h3 class="title">
                <i class='el-icon el-icon-close' @click="closeAudio"></i>
            </h3>
            <div :id="audioId" class="waveform" style='background-color: #EEEEEE'>
            </div>
            <div class="controls">
                <button class="btn btn-primary" data-action="back">
                    <i class="glyphicon glyphicon-step-backward"></i>
                    后退
                </button>
                <button class="btn btn-primary" data-action="play">
                    <i class="glyphicon glyphicon-play"></i>
                    播放 /
                    <i class="glyphicon glyphicon-pause"></i>
                    暂停
                </button>
                <button class="btn btn-primary" data-action="forth">
                    <i class="glyphicon glyphicon-step-forward"></i>
                    快进
                </button>
                <button class="btn btn-primary" data-action="toggle-mute">
                    <i class="glyphicon glyphicon-volume-off"></i>
                    静音
                </button>
            </div>
        </div>
    </div> 
</template>

<script>
import WaveSurfer from "wavesurfer.js";

export default {
    props: {
        url: {
            type: String,
            default: ''
        },
    },
    name: "waveSurfer",
    data() {
        return {
            audioId: 'audio' + new Date().getTime(),
            show: false,
            wavesurfer: '',
            GLOBAL_ACTIONS: {},
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.wavesurfer = WaveSurfer.create({
                container: "#" + this.audioId,
                waveColor: "violet",
                progressColor: "purple"
            });

            this.GLOBAL_ACTIONS = {
                play: () => {
                    this.wavesurfer.playPause();
                },

                back: () => {
                    this.wavesurfer.skipBackward();
                },

                forth: () => {
                    this.wavesurfer.skipForward();
                },

                "toggle-mute": () => {
                    this.wavesurfer.toggleMute();
                }
            };

            [].forEach.call(document.querySelectorAll("[data-action]"), (el) => {
                    el.addEventListener("click", (e) => {
                        var action = e.currentTarget.dataset.action;
                        console.log(action, "开始执行操作");
                        if (action in this.GLOBAL_ACTIONS) {
                            e.preventDefault();
                            this.GLOBAL_ACTIONS[action](e);
                        }
                    });
                }
            );

            this.wavesurfer.on("ready", () => {
                this.wavesurfer.play();
            });
        });
    },
    beforeDestroy() {
        if(this.wavesurfer) {
            this.wavesurfer.destroy();
        }
    },
    methods: {
        showAudio(url) {
            this.show = true;
            setTimeout(() => {
                this.wavesurfer.load(this.url || url);
            }, 200)
        },
        closeAudio() {
            this.wavesurfer.pause();
            this.show = false;
        },
    },
};
</script>

<style lang='scss'>
.webaudiocomp{
    cursor: move;
    .title{
        height: 20px;
        line-height: 20px;
        i{
            float: right;
            margin: 3px 3px 0 0;
            cursor: pointer;
            &:hover{
                color: red;
            }
        }
    }
    .waveform {
        cursor: pointer;
        background-color: transparent !important;
    }
}
.audioPlayer {
    position: fixed;
    z-index: 999999;
    width: 600px;
    left: calc(50% - 300px);
    top: calc(50% - 90px);
    background-size: contain;
    background: url("/static/img/icon/audioBg.png") no-repeat;
    .controls {
        text-align: center !important;
        background-color: #cccccc;
    }
}
</style>
